<template>
  <div class="app-container">
  <div class="filter-container">
      
        <el-input clearable v-model="search.number" placeholder="维修工单" style="width: 170px;margin-left:0px;"></el-input>
        <el-input clearable v-model="search.number" placeholder="车牌号码" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.name" placeholder="联系人" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.phone" placeholder="联系电话" style="width: 170px;margin:0 5px;"></el-input>
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="维修单号">
        <template slot-scope="scope">
          <span>{{ scope.row.fixnumber }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="进厂时间">
        <template slot-scope="scope">
          <span>{{ scope.row.fixdate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="车牌号码">
        <template slot-scope="scope">
          <span>{{ scope.row.licenseplate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="具体车型">
        <template slot-scope="scope">
          <span>{{ scope.row.carname }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="预计交车时间">
        <template slot-scope="scope">
          <span>{{ scope.row.completedate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="客户姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="联系电话">
        <template slot-scope="scope">
          <span>{{ scope.row.customerphone }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="维修类型">
        <template slot-scope="scope">
          <span>{{ scope.row.fixtype | parseFixType }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="制单人">
        <template slot-scope="scope">
          <span>{{ scope.row.guider }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="审核">
        <template slot-scope="scope">
          <span>{{ scope.row.check }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state | parseSettlementState }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  width="320" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="rowSettlementClick(scope.row.id)">结算</el-button>
          <el-button type="primary" size="small" @click="rowReimbursementClick(scope.row.id)">报销</el-button>
          <el-button type="primary" size="small" @click="rowProcessClick(scope.row.id)">进度</el-button>
          <el-button type="primary" size="small" @click="rowDetailClick(scope.row.id)">详情</el-button>
          
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 领料明细 -->
<el-dialog :title="dialogMaterial.title" :visible.sync="dialogMaterial.visible"  width="900px">
    <div class="ci">
        <el-table v-loading="dialogMaterial.listLoading" :data="dialogMaterial.list" 
            border fit highlight-current-row stripe 
            style="width: 100%">
            <el-table-column align="center" label="序" width="80">
                <template slot-scope="scope">
                <span>{{ scope.row._id }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="配件名称">
                <template slot-scope="scope">
                <span>{{ scope.row.fixnumber }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="编码">
                <template slot-scope="scope">
                <span>{{ scope.row.fixdate }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="数量">
                <template slot-scope="scope">
                <span>{{ scope.row.licenseplate }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="已出库数量">
                <template slot-scope="scope">
                <span>{{ scope.row.completedate }}</span>
                </template>
            </el-table-column>
            
            
            <el-table-column  min-width="100" align="center" label="日期">
                <template slot-scope="scope">
                <span>{{ scope.row.createtime | parseTime('{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            
            
            </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogMaterial.visible = false">关 闭</el-button>
    </div>
</el-dialog>
<!-- end 跟进 -->

  </div>
</template>

<script>
import * as fixmanageApi from '@/api/aftersale/fixmanage'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'

export default {
    components: { Pagination },
    data(){
        return{
          search:{ 
              number:'',
              customer:'',
              phone:'',
              daterange:'',
              filtercomplete:true,
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
            takers:[]
          },

          dialogMaterial:{
              visible:false,
              saveloading:false,
              title:'领料明细',
              
              list:null,
              listLoading:false,
          },
          
        }
    },
    created(){
        var that=this;
        //初始化下拉菜单
        //enumHelper.initOptions(that.selectOptions.salesState,enumHelper.presale.salesState);
        that.fetchData();
    },
    filters:{
      parseFixType(val){
        return enumHelper.aftersale.fixType.getName(val);
      },
      parseFixCategory(val){
        return enumHelper.aftersale.fixCategory.getName(val);
      },
      parseSettlementState(val){
        return enumHelper.aftersale.settlementState.getName(val);
      }

    },
    methods:{
        fetchData(){
          var that=this;
            fixmanageApi.getSettlementList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
              }
            })
        },
        refreshClick(){
          this.fetchData();
        },
        
       
        rowExtraClick(id){
             this.$router.push({
                  path:'/aftersalemanage/allocate/workorder'
              });
        },
        rowMaterialClick(id){
            this.dialogMaterial.visible=true;
        },
        rowProcessClick(id){

        },
        rowDetailClick(id){

        }
    }
}
</script>

<style>

</style>